<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>店铺</title>
    <link rel="icon" href="img/icon-mogujie.png" type="image/x-icon">
    <meta name="keywords" content="买衣服，先逛蘑菇街">
    <meta name="description"
          content="蘑菇街，是中国领先的时尚目的地。公司通过形式多样的时尚内容，种类丰富的时尚商品，以及结合红人直播、买手选款+智能推荐的售卖方式，让人们在分享和发现流行趋势的同时，尽情享受优质的购物体验。2011年，蘑菇街正式上线，2016年1月与美丽说战略融合，公司旗下包括：蘑菇街、美丽说、uni等产品与服务。">
    <link rel="stylesheet" href="css/reset1.css">
    <link rel="stylesheet" href="css/public1.css">
    <link rel="stylesheet" href="css/index1.css">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
    <script src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="/webjars/axios/0.19.0/dist/axios.js"></script>
</head>
<body>
<div id="vuebox">
    <div class="detail-content">
        <!--顶部开始-->
        <!-- 顶部悬浮搜索栏 -->
        <div id="top_search">
            <section>
                <a href="" class="title">
                    <h1>蘑菇街</h1>
                    <img src="img/MoGuJie.png" alt="">
                </a>
                <div class="search-bar">
                    <form action="">
                        <input type="search" placeholder="口红">
                        <input type="submit" value="">
                    </form>
                </div>
                <a href="">
                    <span>消息</span>
                </a>
                <a href="">
                    <span>收藏</span>
                </a>
                <a href="cart.html">
                    <span>购物车</span>
                </a>

                <a href="login&register.html">
                    <img src="img/login.png" alt="">
                    <p>登录</p>
                    <span></span>
                </a>
                <ul class="top_usermenu">
                    <li>
                        <p>我的订单</p>
                    </li>
                    <li>
                        <p>个人设置</p>
                    </li>
                    <li>
                        <p>退出</p>
                    </li>
                </ul>
            </section>
        </div>
        <!--顶部结束-->

        <!--店铺信息开始-->
        <div class="shopInfoWrap">
            <div class="w">
                <div class="shopInfo">
                    <img :src="shop.headpic" class="shopInfoImg">
                    <div class="shopInfoContent">
                        <span class="shopTitle">{{shop.shopname}}</span>
                        <div class="star">
                            <i ></i>
                            <i ></i>
                            <i ></i>
                            <i ></i>
                        </div>
                        <div class="evalute">
                            <span>描述<i class="evalute-green">4.69</i></span> 
                            <span>质量<i class="evalute-green">4.70</i></span>
                            <span>服务<i class="evalute-red">4.78</i></span> 
                        </div>
                    </div>
                    <div class="shopInfobtn">
                      <a href="javascript:;" @click="insertcollection()">
                          <div class="addCollect" v-if="status=='' ">
                              <td></td>收藏店铺</td>
                          </div>
                          <div class="addCollect" v-if="status!=''">
                              <td >已收藏</td>
                          </div>
                      </a>

                    </div> 
                </div>

                <div class="detailSearch">
                    <form action="" class="searchLocal">
                        <input type="text" v-model="commOrTypeName" class="searchContent" placeholder="裙子">
                        <button type="button" @click="selectquanzhan()" class="shopBtn">搜全站</button>
                        <button type="button" @click="selectbendian()" class="shopSearch">搜本店</button>
                    </form>
                </div>
            </div>
        </div>   
        <!--店铺信息结束-->
<!--首页-->
        <!--店铺导航栏开始-->
        <div class="shopNav">
            <div class="top-banner-img"></div>
            <div class="w navList">
                <ul>
                    <a href="#" @click="selectshopByname(0)"><li style="color: whitesmoke">首页</li></a>
                    <a href="#" @click="selectshopByname(item.shoptype.tid)" v-for="item in shoptype"><li style="color: whitesmoke">{{item.typename}}</li></a>
                </ul>
            </div>
            <img src="image/detail/shopBanner.jpg" class="shopBanner">
            <div class="w">
                <div class="minus">
                    <img src="image/detail/minus.png" class="minusImg">
                    <span class="minusDes">满3件立减5元</span>
                    <div class="moreMinus">更多优惠</div>
                </div>
                <img src="image/detail/newArrival.jpg">
            </div>
        </div>
        <!--店铺导航栏结束-->

        <!--店铺产品展示开始-->
        <div class="w products">
            <div class="sort">
                <a href="javascript:;" @click="selectshopByname(1)"><li style="color: slategray">综合</li></a>
                <a href="javascript:;" @click="selectshopByname(3)"><li style="color: slategray">新品</li></a>
                <a href="javascript:;" @click="selectshopByname(5)"><li style="color: slategray">销量</li></a>
            </div>
            <div class="goodsList">
                <div class="goodItem" v-for="item in shopcomm">
                    <a href="javascript:;" >
                        <img :src="item.headpic" @click="selectheadpic(item.id)" class="itemImg">
                        <p class="goodName">  {{item.commname}}
                        </p>
                        <span class="goodPrice">￥{{item.price}}</span>
                        <div class="collectNum">
                            <i class="fa fa-star-o" aria-hidden="true"></i>
                            {{item.count}}
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!--店铺产品展示开始-->

        <!--底部信息栏-->
        <div class="footer">
        <div class="slogen fl">
            <span class="item slogen2">
                <img src="img/slogen2.png">
            </span>
            <span class="item">
                <img src="img/slogen3.png">
            </span>
            <span class="item slogen1">
                <img src="img/slogen1.png">
            </span>
            <span class="item slogen4">
                <img src="img/slogen4.png">
            </span>
        </div>
        <div class="w">
            <div class="helpLink">
                <dl>
                    <dt>- 新手帮助 -</dt>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                    <dd><a href="#">意见反馈</a></dd>
                </dl>
                <dl>
                    <dt>- 权益保障 -</dt>
                    <dd>全国包邮</dd>
                    <dd>7天无理由退货</dd>
                    <dd>退货运费补贴</dd>
                    <dd>限时发货</dd>
                </dl>
                <dl>
                    <dt>- 支付方式 -</dt>
                    <dd>微信支付</dd>
                    <dd>支付宝</dd>
                    <dd>白付美支付</dd>
                </dl>
                <dl>
                    <dt>- 移动客户端下载 -</dt>
                    <div class="downcode">
                        <ul>
                            <li class="down2">MyWay<img src="img/QRcode.png"></li>
                            <li>秀Style<img src="img/QRcode.png"></li>
                            <li>uni引力<img src="img/QRcode.png"></li>
                        </ul>
                    </div>
                </dl>
            </div>
            <div class="map fr">
                <b>MyWay自营覆盖区县</b>
                <p>MyWay已向全国2357个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>   
                <p class="detail"><a href="#">查看详情 ></a></p>
            </div>
        </div>
        <div class="w">
            <div class="copyright">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">招聘信息</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">商家入驻</a></li>
                    <li><a href="#">商家后台</a></li>
                    <li><a href="#">MyWay商学院</a></li>
                    <li><a href="#">商家社区</a></li>
                    <li><a href="#">规则中心</a></li>
                    <li><a href="#">有害信息举报</a></li>
                    <li class="copyname">&copy; MyWay.com 汉中陕理工网络有限公司</li>
                </ul>
                <br/>
                <ul class="infoBottom fl">
                    <li>营业执照：913301065526808764<span>|</span></li>
                    <li>网络文化经营许可证：汉网文（2016）0349-219号<span>|</span></li>
                    <li>增值电信业务经营许可证：陕B2-20110349<span>|</span></li>
                    <li>安全责任书<span>|</span></li>
                    <li>陕公网安备 33010602002329号</li>
                </ul>
            </div>
        </div>
        <!--底部信息栏结束-->
    </div>
    </div>
</div>
</body>
</html>
<script>
    var vm = new Vue({
        el:"#vuebox",
        data : {
             shoptype:{},
            shop:{},
            shopcomm:{},
            commOrTypeName:"",
            userid:0,
            sid:0,
            status:""
        },
        methods : {
            select:function (sid) {
                axios.get("/type/selectshoptype",{
                    params:{
                        sid:sid
                    }
                }).then(res=>{
                    this.shoptype = res.data
                })
            },
            selectById:function (id) {
                 axios.get("/selectByid",{
                     params:{
                         id:id
                     }
                 }).then(res=>{
                     this.shop = res.data
                 })
            },
            selectshopByname:function (tid) {
                axios.get("/commodity/selectshopallname",{
                    params:{
                        tid:tid
                    }
                }).then(res=>{
                        this.shopcomm = res.data
                })
            },
            selectquanzhan:function () {
                $.cookie("commOrTypeName",this.commOrTypeName);
                window.location.href = 'commolist.html';
            },
            selectbendian:function () {
                var tid = 0;
                if(this.commOrTypeName=="裤子"){
                    tid = 10;
                }
                if(this.commOrTypeName=="裙子"){
                    tid = 6;
                }
                if(this.commOrTypeName=="上衣"){
                    tid = 2;
                }
                 this.selectshopByname(tid);
            },
            selectheadpic:function (id) {
                sessionStorage.setItem("headpicid",id)
                window.location.href = 'show.html';
            },
            insertcollection:function () {
                 axios.get("/insertshopanduser",{
                     params:{
                         shopcollid:this.sid,
                         userid:this.userid
                     }
                 }).then(res=>{
                      if(res.data.status=="添加成功"){
                          this.status = res.data.status
                      }else{
                          alert("添加失败")
                      }
                 })
            }
        },
        mounted(){
            var userid = sessionStorage.getItem("loginid");
            this.userid = userid;
            var sid = sessionStorage.getItem("sid");
            this.sid = sid;
            this.select(sid);
            this.selectById(sid);
            this.selectshopByname(0);
        }
    });
</script>
